% rebase('layout.tpl', title=title, year=year, jsfiles=['jquery-1.10.2.min.js', 'echarts.min.js'])

<button onclick="update_mac_list()">Update</button>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // myChart.showLoading();

    option = {
        tooltip: {
            formatter: function (params) {
                console.log(params);
                return params.marker + params.name + ': ' + params.value[3] + ' ms';
            }
        },
        title: {
            text: 'Profile',
            left: 'center'
        },
        legend: {
            data: ['bar', 'error']
        },
        dataZoom: [{
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 400,
            height: 20,
            // bottom: 0,
            borderColor: 'transparent',
            backgroundColor: '#e2e2e2',
            labelFormatter: ''
        }, {
            type: 'inside',
            filterMode: 'weakFilter'
        }],
        grid: {
            height: 300
        },
        xAxis: {
            min: 0,
            scale: true,
            axisLabel: {
                formatter: function (val) {
                    // return Math.max(0, val - startTime) + ' ms';
                    return Math.max(0, val) + ' ms';
                }
            }
        },
        yAxis: {
            data: []
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: [{
                name: 'xx',
                value: [
                    0,
                    0,
                    0,
                    0
                ],
                itemStyle: {
                    normal: {
                        color: 'red'
                    }
                }
            }]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    // var data = [];
    // var dataCount = 10;
    // var startTime = +new Date();
    // // var startTime = 0;
    // var nodes = ['01A', '01B', '01C', '02A', '02B', '02C'];
    var types = [
        { name: 'odd', color: '#7b9ce1' },
        { name: 'even', color: '#bd6d6c' },
    ];

    // // Generate mock data
    // echarts.util.each(nodes, function (category, index) {
    //     var baseTime = startTime;
    //     for (var i = 0; i < dataCount; i++) {
    //         // var typeItem = types[Math.round(Math.random() * (types.length - 1))];
    //         var typeItem = types[i % 2];
    //         var duration = Math.round(Math.random() * 10000);
    //         data.push({
    //             name: typeItem.name,
    //             value: [
    //                 index,
    //                 baseTime,
    //                 baseTime += duration,
    //                 duration
    //             ],
    //             itemStyle: {
    //                 normal: {
    //                     color: typeItem.color
    //                 }
    //             }
    //         });
    //         // baseTime += Math.round(Math.random() * 2000);
    //     }
    // });

    var mac_list = [];
    function update_mac_list() {
        $.get('/ajax/log/summary')
            .done(function (data) {
                myChart.hideLoading();
                // console.log(data);
                mac_list = JSON.parse(data.mac_list);
                mac_list = ['08:00:27:df:0e:00', '08:00:27:b6:2c:c7', '08:00:27:00:4d:b7'];
                // mac_list.pop();
                // mac_list.pop();
                // mac_list.pop();
                // mac_list.pop();
                // console.log(mac_list);
                // var series = [];
                // // mac_list.forEach(function (mac) {
                // for (var i = 0; i < mac_list.length; i++) {
                //     series = series.concat([{
                //         type: 'scatter',
                //         data: option.series[i] ? option.series[i].data : [],
                //         symbolSize: function (val) {
                //             return val[2] * 0.5;
                //         },
                //     }]);
                // }
                // console.log(series);
                // option.series = series;
                // option.yAxis.max = mac_list.length - 1;
                // option.yAxis.data = mac_list;
                option.series[0].data = [];
                update_data();
            })
            .fail(function (data) {
                console.log('Error: ' + data);
            })
    }
    function update_data() {
        for (var idx = 0; idx < mac_list.length; idx++) {
            update_data_of_mac(mac_list[idx], idx);
        }
    }
    function update_data_of_mac(mac, idx) {
        $.get('/ajax/log/summary/' + mac)
            .done(function (data) {
                // console.log(data);
                plan = JSON.parse(data.plan);
                // console.log(plan);
                // console.log(plan == null);
                if (plan == null) {
                    return;
                }
                set_data(plan, idx);
            })
            .fail(function (data) {
                console.log('Error: ' + data);
            });
    }

    function set_data(plan, idx) {
        var pxe_list = plan.pxe_list;
        var data = [];

        //         data.push({
        //             name: typeItem.name,
        //             value: [
        //                 index,
        //                 baseTime,
        //                 baseTime += duration,
        //                 duration
        //             ],
        //             itemStyle: {
        //                 normal: {
        //                     color: typeItem.color
        //                 }
        //             }
        //         });
        var baseTime = 0;
        pxe_list.forEach(
            function (pxe) {
                data = data.concat(
                    pxe.log.map(
                        function (i) {
                            // return i.dt;
                            // return idx;
                            // return [i.count, idx, i.dt];
                            // return {
                            //     'name': 'time',
                            //     'value': i.dt,
                            // };
                            return {
                                name: plan.client.rack,
                                value: [
                                    idx,
                                    baseTime,
                                    baseTime += i.dt,
                                    i.dt,
                                    i.count
                                ],
                                itemStyle: {
                                    normal: {
                                        color: types[i.count % 2].color
                                    }
                                }
                            };
                        }));
            });
        // console.log(data);

        // console.log('>>>>');
        // console.log(option);
        // var name = plan.client.rack + '-' + plan.client.location;
        // var name = plan.client.rack + '/' + plan.client.location + '(' + plan.mac + ')';
        // option.legend.data[idx] = name;
        // option.yAxis.data[idx] = plan.client.rack + '/' + plan.client.location;
        // // console.log(option);
        // // console.log('<<<<');
        // option.series[idx].name = name;
        // option.series[idx].data = data;
        // var data0 = option.series[idx].data;
        // var delta_n = data.length - data0.length;
        // // console.log(delta_n);
        // for (var i = 0; i < delta_n; i++) {
        //     data0.push(data.pop());
        // }

        // data0 = option.xAxis.data;
        // delta_n = data.length - data0.length;
        // // console.log(delta_n);
        // var base = data0.length;
        // for (var i = 0; i < delta_n; i++) {
        //     data0.push(base + i + 1);
        // }
        // console.log('>>>>');
        // console.log(option);
        option.series[0].data = option.series[0].data.concat(data);
        myChart.setOption(option);
        // console.log(option);
        // console.log('<<<<');
    };
    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;

        return {
            type: 'rect',
            shape: echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                }),
            style: api.style()
        };
    }




    // update_mac_list();
    // var timer = setInterval(update_mac_list, 5000);
</script>